<template>
  <div class="mask">
    <div class="gameover vertical-center">
      <div>
        <h2 class="text-center" style="color: #776e65">Game Over!</h2>
      </div>
      <div class="between">
        <Btn @click="emit('try-again')">Try Again</Btn>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onBeforeMount, onBeforeUnmount } from "vue";
import Btn from "./Btn.vue";
const emit = defineEmits<{
  (e: "try-again", payload?: any): void;
}>();
const onKeyUp = (e: KeyboardEvent) => {
  if (e.key === "Enter") {
    emit("try-again");
  }
};
onBeforeMount(() => {
  document.addEventListener("keyup", onKeyUp);
});
onBeforeUnmount(() => {
  document.removeEventListener("keyup", onKeyUp);
});
</script>
<style lang="scss" scoped>
h2 {
  margin-bottom: 1em;
}

.mask {
  background-color: rgba($color: #eee3db, $alpha: 0.8);
}

.gameover {
  padding: 0 10%;
}
</style>
